<% require 'out_the_door.rb'
otd = OutTheDoor.new("config.xml") %><!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<!-- Icons from the Tango project -->	
	<link rel="apple-touch-icon" href="icon.png" />
	<link rel="apple-touch-startup-image" href="startup.png" />
  
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name = "viewport" content = "user-scalable=no, width=device-width">
	
	<title>Out the Door!</title>
	<style type="text/css" media="screen">
	 body {
	   margin: 0;
	   padding: 0;
	   text-align: center;
	   font-family: Helvetica;
	   font-size: 16px;
	   background-image: url();
	 }
	 
 	 div#content {
	   width: 280px;
 	   margin-left: auto;
	   margin-right: auto;
	   padding: 20px;
	 }
	 
	 h1 {
	   font-size: 18px;
	   margin: 5px;
     position: absolute;
	 }
	 
	 h2 {
	   font-size: 18px;
	   margin: 5px;
	 }
	 
	 div#date, div#forecast {
	   width: 108px;
	   background-color: white;
	   padding: 10px;
	   border: 1px solid black;
	   -webkit-border-radius: 10px;
	   text-align: center;
     font-size: 18px;
     margin-bottom: 20px;
	 }
	 
	 div#date {
     font-weight: bold;
     font-size: 20px;
     color: #BC0000;
     float: left;
     position: relative;
      top: 40px;
	 }
	 
	 div#forecast {
	   float: right;
	 }
	 
       
   div#dayofmonth {
     font-size: 70px;
     font-weight: bold;
     color: black;
   }
	 	 
   div.transit {
 	   background: white;
	   -webkit-border-radius: 10px;
	   border: 1px solid black;
	   padding: 10px;
   }
	 
	 h3 {
	   text-align: left;
	   margin: 10px 0 3px 0;
	   font-size: 18px;
	   clear: both;
	 }
	 
   div.transit table {
     border-collapse: collapse;
 	   width: 100%;
   }

	 div.transit table td {
	   border: 1px dotted black;
   }
	 
	 div.transit table td.next {font-weight: bold;}
	 div.transit table tr.next {background-color: yellow;}
	</style>
</head>

<body>

<div id="content">
  <h1>Out the Door!</h1>
  
  <div id="date">
    <div><%=Time.now.strftime("%A")%></div>
    <div id="dayofmonth"><%=Time.now.strftime("%e")%></div>
  </div>

  <div id="forecast">
    <table>
      <tr>
        <th>Now</th>
        <td> 
          <img src="<%=otd.weather.current_img_url%>" width="40" height="40" alt="<%=otd.weather.current_conditions%>" title="<%=otd.weather.current_conditions%>"/><br />
          <%=otd.weather.current_temp_f%>°<br /><%=otd.weather.current_conditions%>
        </td>       
      </tr>
      <tr>  
        <th>Later</th>
        <td>  
          <img src="<%=otd.weather.todays_img_url%>" width="40" height="40" alt="<%=otd.weather.todays_conditions%>" title="<%=otd.weather.todays_conditions%>"/><br />
          <%=otd.weather.todays_high_f%>°<br /><%=otd.weather.todays_conditions%>
        </td>
      </tr>
    </table>
  </div>

  <% otd.transit_corridors.each do |corridor| %>
    <h3><%=corridor.name%></h3>  

    <div class="transit">      
      <table>
        <% 
        next_line = corridor.lines.sort[0]
        %>

        <% corridor.lines.each do |line| %>
        <tr <%= (line == next_line && !line.next_departure.nil?) ? 'class="next"' : ''%>>
          <th><%=line.name%></th> 
          <td>
            <%=line.previous_departure.nil? ? "--" : line.previous_departure.strftime("%l:%M")%>
          </td>
          <td class="next">
            <%=line.next_departure.nil? ? "--" : line.next_departure.strftime("%l:%M")%>
          </td>
          <td>
            <%=line.future_departure.nil? ? "--" : line.future_departure.strftime("%l:%M")%>
          </td>
        </tr>
        <% end %>
      </table>
    </div>
  <% end %>

</div>

</body>
</html>